<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <div class="words">
                <span @click="menuClick('indexLayout')">
                    <i class="iconfont icon-r-love" style="font-size: 26px">
                       健康体检中心
                    </i>
                </span>
            </div>
            <div class="words">
              <el-dropdown>
                  <span class="el-dropdown-link">
                  欢迎您，<b>{{ userName }}</b>&nbsp;用户&nbsp;
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <span @click="menuClick('userList')">
                         个人中心
                      </span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
                <span>
                  <el-button type="danger" size="mini" @click="logout">
                        退出
                  </el-button>
                </span>
            </div>
        </el-header>
        <el-container>
          <el-main>
            <el-menu background-color="white" mode="horizontal" text-color="grey" active-text-color="black" :default-active="activePath">
              <el-menu-item index="adminLayout" @click="menuClick('indexLayout')" style="font-size: 20px">
                <i class="iconfont icon-r-home" style="font-size: 26px">
                </i>
                体检中心首页
              </el-menu-item>
              <el-menu-item index="bedList" @click="menuClick('orderList')" style="font-size: 20px">
                <i class="iconfont icon-r-list" style="font-size: 26px">
                </i>
                体检预约查询
              </el-menu-item>
              <el-menu-item index="patientList" @click="menuClick('reportList')" style="font-size: 20px">
                <i class="iconfont icon-r-paper" style="font-size: 26px">
                </i>
                体检报告查询
              </el-menu-item>
              <el-menu-item index="orderList" @click="menuClick('userList')" style="font-size: 20px">
                <i class="iconfont icon-r-user2" style="font-size: 26px">
                </i>
                个人中心
              </el-menu-item>
            </el-menu>
            <!--子路由入口-->
            <router-view>
              <div></div>
            </router-view>
          </el-main>
        </el-container>
    </el-container>
</template>
<script>
import jwtDecode from "jwt-decode";
import { toLoad } from "@/utils/initialize.js";
import {
  getToken,
  clearToken,
  getActivePath,
  setActivePath,
  setUserName,
  getUserName, getUserId
} from "@/utils/storage.js";
export default {
    name: "Admin",
    data() {
        return {
            userName: "" ,
            activePath: "",
            activeName: 'second',
        };
    },
    methods: {

        //导航栏点击事件
        menuClick(path) {
            this.activePath = path;
            setActivePath(path);
            if (this.$route.path !== "/" + path)
              this.$router.push(path);
            console.log(path);
        },
        //退出登录
        logout() {
            this.$confirm("此操作将退出登录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    clearToken();
                    this.$message({
                        type: "success",
                        message: "退出登录成功!",
                    });
                    this.$router.push("login");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
    },
    mounted() {
        toLoad();
    },
    created() {

      // 执行您想要重复执行的操作
      // 每隔二秒执行一次
      this.interval = setInterval(() => {
        // 执行您想要重复执行的操作
        //  获取激活路径
        this.activePath = getActivePath();
        // 解码token
        this.userName = getUserName();

      }, 2000); // 2000毫秒为2秒
    },
    beforeDestroy() {
        // 在组件销毁前清除定时器
          clearInterval(this.interval);
    },
};
</script>
<style scoped lang="scss">
.title {
    cursor: pointer;
}
.el-header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgrey;
}
.words {
  text-align: center;
  span {
    color: black;
  }
}
.el-container {
    height: 100%;
}
.el-aside {
    background-color: white;
    border-right: 1px solid lightgrey;
}
.el-menu {
    border: 0;
}
</style>
